<template>
  <div>
    <a-modal :visible="visible" title="设置标签" @before-open="open" @before-ok="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="600px" :mask-closable="false">
      <a-tabs v-model:active-key="curPage">
        <a-tab-pane key="1" title="取消标签">
          <a-empty v-if="newTagList.length == 0" description="暂无标签，请先去添加" />
          <a-tag v-else @close="deleteTag($event, index)" v-for="(item, index) of newTagList" :key="item.name" :color="item.color" closable round class="tag">{{ item.name }}</a-tag>
        </a-tab-pane>
        <a-tab-pane key="2" title="添加标签">
          <a-button type="text" @click="detail.visible = true">管理标签</a-button>

          <a-table size="mini" :loading="loading" style="margin-top: 10px" class="table-single-line" row-key="code" v-model:selected-keys="ids" :data="tagList" :row-selection="rowSelection" :pagination="false" :scroll="{ y: '300px' }">
            <template #columns>
              <a-table-column title="颜色" #cell="{ record }" align="center" :width="80">
                <span class="color" :style="{ backgroundColor: record.color }"></span>
              </a-table-column>
              <a-table-column title="标签名字" #cell="{ record }" align="center" :width="200">
                <span>{{ record.name }}</span>
              </a-table-column>
            </template>
          </a-table>
        </a-tab-pane>
      </a-tabs>

      <Detail ref="detail" @save="getTagList" />
      <template #footer>
        <div>
          <div v-if="$authPass(perCodeMap[type][curPage])">
            <a-button @click="visible = false">取消</a-button>
            <a-button class="ml10" type="primary" @click="handleOk">确定</a-button>
          </div>
        </div>
      </template>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, reactive, toRefs, computed } from 'vue'
  import { tagList } from '@/api/order'
  import { Message } from '@arco-design/web-vue'
  import Detail from './tagDetail.vue'
  import _ from 'lodash-es'
  export default defineComponent({
    props: ['dataList', 'type'],
    components: { Detail },
    setup(props: any, { emit }) {
      let visible = ref(false)
      const detail = ref()

      const data: any = reactive({
        curPage: '1',
        tagList: [],

        perCodeMap: {
          fba: {
            '1': 'oms.order.fba.cancelTag',
            '2': 'oms.order.fba.addTag',
          },
          oms: {
            '1': 'oms.order.tag.cancel',
            '2': 'oms.order.tag.add',
          },
        },

        rowSelection: {
          width: '40',
          type: 'checkbox',
          showCheckedAll: true,
        },
        ids: [],
        newTagList: [],
        loading: false,
      })

      console.log(data.perCodeMap[props.type][data.curPage])

      const open = () => {
        data.newTagList = []
        data.newTagList = deduplication(props.dataList)
        getTagList()
      }
      const handleOk = () => {
        if (data.ids.length <= 0 && data.curPage == 2) {
          return Message.error('请先选择标签')
        }
        let idList: Array<string> = []
        if (data.curPage == 1) {
          let arr = data.newTagList.map((e: any) => e.code)
          let newArr = props.dataList.map((el: any) => el.code)
          newArr.forEach((e: string) => {
            let index = arr.findIndex((el: string) => e == el)
            if (index == -1) {
              idList.push(e)
            }
          })
        } else {
          idList = data.ids
        }
        visible.value = false

        emit('save', idList, data.curPage == '1' ? 'del' : 'add')
        data.ids = []
      }
      const handleCancel = () => {
        data.ids = []
        visible.value = false
      }

      const deduplication = (arr: any) => {
        let newArr: any = []
        arr.forEach((e: any) => {
          let index = _.cloneDeep(newArr).findIndex((el: any) => e.code == el.code)
          if (index == -1) {
            newArr.push(e)
          }
        })
        return newArr
      }

      const getTagList = async () => {
        data.loading = true
        const res = await tagList()
        data.tagList = res?.data
        data.loading = false
      }

      const deleteTag = (ev: MouseEvent, index: string) => {
        data.newTagList.splice(index, 1)
      }

      return {
        ...(toRefs(data) as any),
        visible,
        open,
        handleOk,
        handleCancel,
        detail,
        getTagList,
        deleteTag,
      }
    },
  })
</script>

<style lang="less" scoped>
  .title {
    margin: 5px 0;
    color: #ababab;
  }

  .tag {
    color: #2c4358;
    margin: 10px 10px 10px 0;
  }

  .color {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
  }
</style>
